import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Icon, message, Avatar, Tree,Steps,Button, Modal,Radio,Select } from 'antd';
import styles from './index.less';
import {TimeSpan} from '../../utils';
import moment from "moment";
const Step = Steps.Step;
const RadioGroup = Radio.Group;
const { Option, OptGroup } = Select;
var timeout = null;
var arrKeySub_5 = {};
let arrNameSub = {};
const { TreeNode } = Tree;
const Pages = ({ account_working, dispatch, loading }) => {

    return <div style={{margin:30}}>
        <PagesGET dispatch={dispatch} {...account_working} StepsValue={account_working.StepsValue} loading={loading.global}/>
        <h3 style={{marginTop:-20,color:'#aaa'}}>
            <a style={{cursor:'pointer'}} onClick={()=>{dispatch({type:"account_working/save",payload:{ID_1:false,ID_2:false,ID_3:false}});}}>#工作流管理</a>
            /预案启动流程设计
        </h3>
        <Steps direction="vertical" current={5}>
            <Step status='process' title={<h2 style={{borderBottom:'1px solid #aaa'}}>启动预案步骤</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>逐级审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button onClick={()=>{
                                //dispatch({type:'account_working/save',payload:{StepsValue:'1',visible:true}});
                            }} icon='user'>值长</Button>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                        <Button onClick={()=>{
                            //dispatch({type:'account_working/save',payload:{StepsValue:'1',visible_1:true}});
                        }} style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                    </div>
                </div>} />
            <Step status='process' title={<h2 style={{borderBottom:'1px solid #aaa'}}>预案默认步骤</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>逐级审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button onClick={()=>{
                                dispatch({type:'account_working/save',payload:{StepsValue:'1',visible:true}});
                            }} icon='user'>值长</Button>
                            <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                    </div>
                </div>} />
            <Step status='process' title={<h2 style={{borderBottom:'1px solid #aaa'}}>预案通知签到步骤</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>并行审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button icon='user'>发起人</Button>
                            <Button style={{margin:10}} icon='user'>预案负责人(会签)</Button>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                        <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                    </div>
                </div>
            } />
            <Step status='process' title={<h2 style={{borderBottom:'1px solid #aaa'}}>预案执行结果反馈</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>并行审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button icon='user'>发起人</Button>
                            <Button style={{margin:10}} icon='user'>预案负责人(会签)</Button>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                        <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                    </div>
                </div>
            } />
            <Step status='process' title={<h2 style={{borderBottom:'1px solid #aaa'}}>预案申请结束</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>并行审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button icon='user'>发起人</Button>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                        <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                    </div>
                </div>
            } />
            <Step title={<h2 style={{borderBottom:'1px solid #aaa'}}>预案结束默认审批步骤</h2>} description={
                <div style={{width:'100%',border:'1px solid #aaa',padding:10,borderRadius:5}}>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>审批类型</p>
                        <div style={{marginBottom:10}}>逐级审批</div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>执行人</p>
                        <div style={{marginBottom:10}}>
                            <Button icon='user'>厂长(或签)</Button>
                            <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                        </div>
                    </div>
                    <div style={{display:"flex"}}>
                        <p style={{width:100}}>抄送</p>
                        <div style={{marginBottom:10}}>未设置(不抄送给任何人)</div>
                        <Button style={{marginLeft:10}} shape="circle" icon="plus" size='small'/>
                    </div>
                </div>
            } />
        </Steps>
    </div>;
};

class PagesGET extends React.Component {
    constructor (props){
        super(props);
        this.state={
            RadioValue:1,
            RadioValue_1:1,
        };
    }
    componentWillMount () {
        this.props.dispatch({type:'account_working/getRole'});
    }

    //角色树
    menuTreeOneFunRole (arr){
        return arr.map(item =>{
            if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name?false:true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }
    render (){
        let {visible,dispatch,StepsValue,ZRBM,visible_1} = this.props;
        return <div>
            <Modal
                title="人员角色信息"
                visible={visible}
                onOk={()=>{
                    console.log(this.state.RadioValue,this.state.standard,this.state.RadioValue_1);
                }}
                onCancel={()=>{dispatch({type:'account_working/save',payload:{visible:false}});}}
            >
                <div>审批类别:<RadioGroup style={{marginLeft:20}} onChange={(e)=>{
                    this.setState({
                        RadioValue:e.target.value,
                    });
                }} value={this.state.RadioValue}>
                    <Radio value={1}>发起人自己</Radio>
                    <Radio value={2}>角色</Radio>
                </RadioGroup></div>
                <div>
                    {
                        this.state.RadioValue ===1?
                            <div style={{margin:'60px 0 0 60px'}}>
                                <p>发起人自己作为审批人审批单</p>
                            </div>:
                            <div>
                                <div style={{marginTop:20,marginBottom:20}}>
                                    <span><span style={{color:'red'}}>*</span>修改角色:</span>
                                    <Select value={this.state.standard || undefined} style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}} onChange={(value)=>{
                                        this.setState({standard :value});
                                    }}>
                                        {
                                            ZRBM && this.menuTreeOneFunRole(ZRBM)
                                        }
                                    </Select>
                                </div>

                                <div>多人审批时,采用的审批方式:
                                    <RadioGroup style={{marginLeft:20,marginTop:20}} onChange={(e)=>{
                                        this.setState({
                                            RadioValue_1:e.target.value,
                                        });
                                    }} value={this.state.RadioValue_1}>
                                        <Radio value={1}>会签(需所有人审批同意)</Radio>
                                        <Radio value={2}>或签(角色一人同意或拒绝即可)</Radio>
                                    </RadioGroup>
                                </div>
                            </div>
                    }
                </div>
            </Modal>
            <Modal
                title="添加抄送人"
                width={700}
                visible={visible_1}
                onOk={()=>{

                }}
                onCancel={()=>{dispatch({type:'account_working/save',payload:{visible_1:false}});}}
            >
                <div style={{display:'flex',justifyContent:'space-between',padding:5,border:'1px solid #aaa'}}>
                    <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                        <h2 style={{marginLeft:10}}>选择:</h2>
                        <Tree
                            checkable
                            onExpand={this.onExpand}
                            checkStrictly={false}
                            defaultExpandAll={true}
                            onCheck={(checkedKeys,halfChecked)=>{
                                //自由控制checkStrictly=true,并注释掉下面这行!
                                checkedKeys.uniq;//数组去重
                                checkedKeys.map((item,index)=>{
                                    if(arrKeySub_5[item]){
                                        delete checkedKeys[index];
                                    }
                                });
                                //console.log('checkedKeys',checkedKeys.notempty(),arrKeySub_5);
                                this.setState({
                                    checkedKeys_5:checkedKeys.notempty(),
                                });
                            }}
                            showLine
                        >
                            {this.renderTreeNodes_5([{orgList:ZRBM,roleList:[],id:'000',s_name:'全选'}])}
                        </Tree>
                    </div>
                    <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                        <h2 style={{marginLeft:10}}>已选:</h2>
                        {
                            this.state.checkedKeys_5 && this.state.checkedKeys_5.map(item=>{
                                return <p style={{marginLeft:40,marginRight:10}} key={item}>
                                    <Icon type="team"/>{arrNameSub[item]}</p>;
                            })
                        }
                    </div>
                </div>
            </Modal>
        </div>;
    }
    renderTreeNodes_5 = data => data.map((item) => {
        if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
            arrKeySub_5[item.id] = true;
            return (
                <TreeNode title={item.s_name} key={item.id} dataRef={item}>
                    {this.renderTreeNodes_5(item.roleList)}{this.renderTreeNodes_5(item.orgList)}
                </TreeNode>
            );
        }
        if(arrKeySub_5[item.id]){
            return;
        }
        arrNameSub[item.id] = item.rolr_name || item.s_name;
        if(item.s_name){
            arrKeySub_5[item.id] = true;
        }
        return <TreeNode title={item.rolr_name || item.s_name} key={item.id} dataRef={item} />;
    });
}


Pages.propTypes = {
    account_working: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ account_working, loading }) => ({ account_working, loading }))(Pages);